<template>
  <div class="ce">
    <div class="ceBox1">
      <h1>各大行业职业任你选</h1>
      <div class="minBox">
        <input type="text" placeholder="手机号" /><br />
        <input type="text" placeholder="短信验证码" /><br />
        <button @click="goLogin">登陆/注册</button><br />
        <input type="checkbox" name="" id="" />
        <span>BOSS直聘 <a href="">用户协议|隐私政策</a></span>
      </div>
    </div>
    <!-- 第二个 -->
    <div class="ceBox2">
      <h2 @click="goLogin">上传简历一件注册</h2>
    </div>
    <!-- 第3个 -->
    <div class="ceBox3">
      <h2>看过的职位</h2>
      <div v-for="(iem,idx) in ceNav" :key="idx" class="minCeBox3">
        <div class="minCeBox3left">
<h4>{{iem.jobDemands}}</h4>
<p>{{iem.enterpriseService}}</p>
        </div>
        <div class="minCeBox3right">
<h6>{{iem.compensation}}</h6>
<p>{{iem.companyDddress}}</p>
        </div>
      </div>
    </div>
    <!-- 第4个 -->
    <div class="ceBox4"></div>
    <!-- 第5个 -->
    <div class="ceBox5"></div>

    <!-- 第6个 -->
    <div class="ceBox6"></div>
  </div>
</template>

<script>
import { getInpo } from "@/api";

export default {
  name: "ce",
  data() {
    return {
      ceNav:[]
    };
  },

  created() {
    getInpo().then((res) => {
      this.ceNav = res.data.data[5].district[0].children;
      console.log(this.ceNav);
    });
  },
  methods: {
    // 点击一级渲染二级页面
    goLogin() {
      this.$router.push({
        path: "/login",
      });
    },
  },
};
</script>

<style scoped lang="less">
.activeLi:hover {
  color: aqua;
  border-bottom: 2px solid;
  cursor: pointer;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: white;
  .ce {
    // background: yellow;
    border-radius: 10px;
    .ceBox1 {
      height: 260px;
      background-image: linear-gradient(#5bbdbd 70%, #fff);
      border-radius: 10px 10px 0px 0px;
      text-align: center;
      padding: 0 10px;
      .minBox {
        height: 200px;
        background-image: linear-gradient(#e1f3f3 20%, #fff);
        border-radius: 10px;
        input:nth-child(1) {
          height: 30px;
          margin: 15px 0;
          border-radius: 10px;
          border: none;
          text-indent: 1em;
        }
        input:nth-child(3) {
          height: 30px;
          border-radius: 10px;
          border: none;
          text-indent: 1em;
        }
        button {
          height: 30px;
          width: 139px;
          border-radius: 10px;
          border: none;
          margin: 15px 0;
          background: #55bbbb;
          cursor: pointer;

          color: #fff;
          text-align: center;
          font-size: 15px;
        }
        span {
          font-size: 8px;
          color: black;
          a {
            color: #a2cfd1;
          }
        }
      }
      h1 {
        font-size: 16px;
        color: #fff;
        line-height: 40px;
      }
    }
    .ceBox2 {
      height: 60px;
      margin: 20px 0;
      text-align: center;
      border-radius: 10px;
      padding-top: 20px;
      background-image: linear-gradient(#d4f3f6 10%, #fff);
      h2 {
        width: 139px;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        color: #fff;
        border-radius: 10px;
          background: #55bbbb;

        margin: auto;
        cursor: pointer;
      }
    }
    .ceBox3 {
      min-height: 280px;
      background-color: #fff;
      border-radius: 10px;
      h2 {
        background-image: linear-gradient(#d4f3f6 10%, #fff);
        border-radius: 10px 10px 0 0;
        font-size: 17px;
        line-height: 50px;
        padding: 0 10px;
      }
     .minCeBox3{
        height: 50px;
          border-radius: 10px;
        margin: 0 10px;
        margin-bottom: 10px;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &:hover{
          background-color: #f1f1f1;
          transition: all .5s linear;
        }
        .minCeBox3left{
h4{
  width: 70px;
  font-size: 14px;
   overflow: hidden;
    /*文本不会换行*/
    white-space: nowrap;
    /*当文本溢出包含元素时，以省略号表示超出的文本*/
    text-overflow: ellipsis;
cursor: pointer;

}
p{
  width: 70px;
  color: #999;
  font-size: 10px;
   overflow: hidden;
    /*文本不会换行*/
    white-space: nowrap;
    /*当文本溢出包含元素时，以省略号表示超出的文本*/
    text-overflow: ellipsis;
cursor: pointer;

}
        }
         .minCeBox3right{
h6{
  text-align: right;
font-size: 13px;
color:red;
margin-right: 10px;
cursor: pointer;
}
p{
  width: 80px;
  font-size: 9px;
  color: #999;
  overflow: hidden;
    /*文本不会换行*/
    white-space: nowrap;
    /*当文本溢出包含元素时，以省略号表示超出的文本*/
    text-overflow: ellipsis;
cursor: pointer;

}
        }
      }
    }
    .ceBox4 {
      height: 130px;
      border-radius: 10px;
      padding-left: 10px;
      margin: 20px 0;
      background: url(https://img.bosszhipin.com/static/file/2022/wf8r5vlj1y1653961013785.png)
        no-repeat;
      background-size: 100% 100%;
    }
    .ceBox5 {
      height: 130px;
      border-radius: 10px;
      padding-left: 10px;
      margin: 20px 0;
      background: url(https://img.bosszhipin.com/static/file/2022/0yvtgtkdjk1653961014037.png)
        no-repeat;
      background-size: 100% 100%;
    }
    .ceBox6 {
      height: 130px;
      border-radius: 10px;
      padding-left: 10px;
      margin: 20px 0;
      background: url(https://img.bosszhipin.com/static/file/2022/ne3elze9ld1653961014120.jpg)
        no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
